<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-card style="width: 100%">
        <!--                  <a-col :span="6">
                            <a-form-item label="运费结算时间" v-bind="validateInfos.settleFreightTime">
                              <a-date-picker placeholder="请选择运费结算时间"
                                             v-model:value="formData.settleFreightTime" showTime
                                             value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                                             :disabled="disabled"/>
                            </a-form-item>
                          </a-col>-->
        <a-row>
          <a-col :span="12">
            <a-form-item label="结算方式" v-bind="validateInfos.settleFreightMode">
              <j-dict-select-tag type='radio' v-model:value="formData.settleFreightMode"
                                 dictCode="settle_freight_mode" placeholder="请选择运费结算方式"
                                 :disabled="disabled"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item v-if="formData.settleFreightMode == '2'" label="结算凭证"
                         v-bind="validateInfos.settleFreightVoucher">
              <a-input v-model:value="formData.settleFreightVoucher"
                       placeholder="请输入银行交易流水号"
                       :disabled="disabled"></a-input>
            </a-form-item>
            <a-form-item v-if="formData.settleFreightMode == '1'">
              用户当前余额 :
<!--              flushLoading-->

              <span v-if="userInfo.balance<formData.driverFreightFee"
                    style="color: red">

                {{ userInfo.balance }}
                当前余额不足


              </span>
              <span v-else style="color: black">{{ userInfo.balance }}</span>

                <a-button type="link" @click="toCharge">充值</a-button>

              <a-button type="link" @click="flush">刷新</a-button>
            </a-form-item>
          </a-col>
        </a-row>

      </a-card>
      <a-descriptions title="" layout="vertical" bordered size="small">
        <a-descriptions-item label="基本信息" :span="3">
          <a-row>
            <a-col :span="8">
              <a-form-item label="运单号" v-bind="validateInfos.waybillNo">
                <span style="font-weight: bold">  {{ formData.waybillNo }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="代收款" v-bind="validateInfos.invoicingFee">
                {{ formData.invoicingFee }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="提货时间" v-bind="validateInfos.deliveryTime">
                {{ formData.deliveryTime }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="预计时间" v-bind="validateInfos.estArrivalTime">
                {{ formData.estArrivalTime }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="接单时间" v-bind="validateInfos.orderTime">
                {{ formData.orderTime }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="运费" v-bind="validateInfos.driverFreightFee">
                {{ formData.driverFreightFee }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="运费状态" v-bind="validateInfos.settleFreightStatus">
                {{ formData.settleFreightStatus == "2" ? '已结算' : '未结算' }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="双方信息" :span="3">
          <a-row justify="space-around">
            <a-card style="width: 49%">
              <template #title>
                <span style="font-weight: normal;font-size: 1em">发货人</span>
              </template>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="姓名" v-bind="validateInfos.shipperName">
                    {{ formData.shipperName }}
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="电话" v-bind="validateInfos.shipperPhone">
                    {{ formData.shipperPhone }}
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="证件号" v-bind="validateInfos.shipperIdNum">
                    {{ formData.shipperIdNum }}
                  </a-form-item>
                </a-col>

              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="地区" v-bind="validateInfos.shipperAreaName">
                    {{ formData.shipperAreaName }} ({{ formData.shipperAreaCode }})

                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="地址" v-bind="validateInfos.shipperDetailAddr">
                    {{ formData.shipperDetailAddr }}
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="经纬度" v-bind="validateInfos.shipperLnglat">
                    {{ formData.shipperLnglat }}
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card style="width: 49%">
              <template #title>
                <span style="font-weight: normal;font-size: 1em">收货人</span>
              </template>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="姓名" v-bind="validateInfos.consignerName">
                    {{ formData.consignerName }}
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="电话" v-bind="validateInfos.consignerPhone">
                    {{ formData.consignerPhone }}
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="证件号" v-bind="validateInfos.consignerIdNum">
                    {{ formData.consignerIdNum }}
                  </a-form-item>
                </a-col>

              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="地区" v-bind="validateInfos.consignerAreaName">
                    {{ formData.consignerAreaName }} ({{ formData.consignerAreaCode }})

                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="地址" v-bind="validateInfos.consignerDetailAddr">
                    {{ formData.consignerDetailAddr }}
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="经纬度" v-bind="validateInfos.consignerLnglat">
                    {{ formData.consignerLnglat }}
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="货物信息" :span="3">
          <a-row>
            <a-col :span="12">
              <a-form-item label="名称" v-bind="validateInfos.cargoName">
                {{ formData.cargoName }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="备注" v-bind="validateInfos.cargoRemark">
                {{ formData.cargoRemark }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="件数" v-bind="validateInfos.cargoPieces">
                {{ formData.cargoPieces }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="重量" v-bind="validateInfos.cargoWeight">
                {{ formData.cargoWeight }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="体积" v-bind="validateInfos.cargoVolume">
                {{ formData.cargoVolume }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="货值" v-bind="validateInfos.cargoPrice">
                {{ formData.cargoPrice }}
              </a-form-item>
            </a-col>
          </a-row>

        </a-descriptions-item>
        <a-descriptions-item label="承运方信息" :span="3">


          <a-row>
            <a-col :span="6">
              <a-form-item label="车牌号" v-bind="validateInfos.driverVehicleNo">
                {{ formData.driverVehicleNo }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="电话" v-bind="validateInfos.driverPhone">
                {{ formData.driverPhone }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="姓名" v-bind="validateInfos.driverName">
                {{ formData.driverName }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="开户名" v-bind="validateInfos.driverBankHolder">
                {{ formData.driverBankHolder }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="银行卡号" v-bind="validateInfos.driverBankCardNo">
                {{ formData.driverBankCardNo }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="开户银行" v-bind="validateInfos.driverBankName">
                {{ formData.driverBankName }}
              </a-form-item>
            </a-col>

          </a-row>


        </a-descriptions-item>
      </a-descriptions>
      <a-row>


        <!--        <a-col :span="24">
                  <a-form-item label="是否收取代收款" v-bind="validateInfos.izInvoicingFee">
                    <a-input-number v-model:value="formData.izInvoicingFee"
                                    placeholder="请输入是否收取代收款" style="width: 100%"
                                    :disabled="disabled"/>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="代收款订单号" v-bind="validateInfos.invoicingOrderNum">
                    <a-input v-model:value="formData.invoicingOrderNum" placeholder="请输入代收款订单号"
                             :disabled="disabled"></a-input>
                  </a-form-item>
                </a-col>-->


      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import {ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted} from 'vue';
import {defHttp} from '/@/utils/http/axios';
import {useMessage} from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JAreaSelect from '/@/components/Form/src/jeecg/components/JAreaSelect.vue';
import {getValueType} from '/@/utils';
import {getLoginUser, saveOrUpdate, settle} from '../WlhyFreightSettlement.api';
import {Form} from 'ant-design-vue';

const userInfo = reactive({});
const props = defineProps({
  formDisabled: {type: Boolean, default: false},
  formData: {
    type: Object, default: () => {
    }
  },
  formBpm: {type: Boolean, default: true}
});
const flushLoading = ref(false);
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  orderUserId: '',
  waybillId: '',
  waybillNo: '',
  deliveryTime: '',
  estArrivalTime: '',
  shipperName: '',
  shipperPhone: '',
  shipperIdNum: '',
  shipperAreaCode: '',
  shipperAreaName: '',
  shipperDetailAddr: '',
  shipperLnglat: '',
  consignerName: '',
  consignerPhone: '',
  consignerIdNum: '',
  consignerAreaCode: '',
  consignerAreaName: '',
  consignerDetailAddr: '',
  consignerLnglat: '',
  cargoName: '',
  cargoPieces: undefined,
  cargoWeight: undefined,
  cargoVolume: undefined,
  cargoPrice: undefined,
  cargoRemark: '',
  invoicingFee: undefined,
  invoicingPayMode: '',
  izInvoicingFee: undefined,
  invoicingOrderNum: '',
  invoicingRealPayMode: '',
  driverFreightFee: undefined,
  settleFreightStatus: undefined,
  settleFreightTime: '',
  settleFreightMode: '',
  izAssignDriver: undefined,
  orderTime: '',
  driverUserId: '',
  driverVehicleNo: '',
  driverPhone: '',
  driverName: '',
  driverBankId: '',
  driverBankHolder: '',
  driverBankCardNo: '',
  driverBankName: '',
  status: '',
  companyName: '',
  companyLogo: '',
  companyId: '',
  settleFreightVoucher: '',
});
const {createMessage} = useMessage();
const labelCol = ref<any>({xs: {span: 24}, sm: {span: 5}});
const wrapperCol = ref<any>({xs: {span: 24}, sm: {span: 16}});
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
  settleFreightMode: [{required: true, message: '请选择结算方式', trigger: 'blur'}],

};

const {
  resetFields,
  validate,
  validateInfos
} = useForm(formData, validatorRules, {immediate: false});

// 表单禁用
const disabled = computed(() => {
  if (props.formBpm === true) {
    if (props.formData.disabled === false) {
      return false;
    } else {
      return true;
    }
  }
  return props.formDisabled;
});


/**
 * 新增
 */
function add() {
  edit({});
}

const getUserInfo = () => {
  for (let key in userInfo) {
    if (userInfo.hasOwnProperty(key)) {
      delete userInfo[key];
    }
  }

  getLoginUser().then(res => {
    Object.assign(userInfo, res);
  })
}

const toCharge = () => {
window.open("/balance/WlhyBalanceCharge")
}
const flush = () => {
  flushLoading.value = true;
  for (let key in userInfo) {
    if (userInfo.hasOwnProperty(key)) {
      delete userInfo[key];
    }
  }

  getLoginUser().then(res => {
    Object.assign(userInfo, res);
  }).finally(() => {
    flushLoading.value = false;
  })
}

/**
 * 编辑
 */
function edit(record) {
  getUserInfo();

  nextTick(() => {
    resetFields();
    const tmpData = {};
    Object.keys(formData).forEach((key) => {
      if (record.hasOwnProperty(key)) {
        tmpData[key] = record[key]
      }
    })
    //赋值
    Object.assign(formData, tmpData);
  });
}

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;

  //时间格式化
  let model = formData;

  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }
  await settle(model)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}


defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  height: calc(90vh) !important;
  overflow-y: auto;
  padding: 14px;
}
</style>
